import React, { Component } from "react";
import MainLayout from "../../../component/mainLayout/mainLayout";
import { connect } from "react-redux";
import Card from "./card";
import SysUpdate from "../../../component/sysUpdate/sysUpdate";
import { getSelectedBankList } from "../../../Redux/Action/xhqbBank/bank.jsx";
import yhTools from "../../../tools/yh";

import "./index.scss";

/**
 * 快捷支付银行卡列表
 */
@connect(
	state => ({
		selectedBankList: state.xhqbBankReducer.selectedBankList
	}),
	dispatch => ({
		getSelectedBankList: value => dispatch(getSelectedBankList(value))
	})
)
class BankList extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	componentDidMount = () => {
		const { getSelectedBankList } = this.props;
		getSelectedBankList();
	};
	addBank = () => {
		this.props.history.push(`/xhqbAddBank`);
	};
	/**银行卡详情 */
	handleBankCardDetial = bankCardInfo => {
		this.props.history.push({
			pathname: "/unboundBankCard",
			state: {
				bankCardInfo: bankCardInfo
			}
		});
	};

	render() {
		const { selectedBankList } = this.props;
		const _pageParams = {
			header: {
				title: "银行卡",
				goBackAction: () => {
					if (sessionStorage.getItem("index_fromType") === "app") {
						yhTools.closePage({ flag: "bankList" });
					} else {
						this.props.history.goBack();
					}
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				{selectedBankList && (
					<div className="bank-list-container">
						{selectedBankList.length ? (
							selectedBankList.map(item => (
								<Card
									onClick={this.handleBankCardDetial.bind(this, item)}
									item={item}
									key={Math.random()}
								/>
							))
						) : (
							<SysUpdate />
						)}
					</div>
				)}
			</MainLayout>
		);
	}
}

export default BankList;
